<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		     <script src="../js/vue.min.js"></script>
			 <script src="../js/axios.js"></script>
	</head>
	<body>
    <div id="app1">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2" align="center">学生基本信息</td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>
                    <input v-model="name" style="width:150px" />
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" id="boy" value="男" v-model="sex">
                    <label for="boy">男</label>
                    <input type="radio" id="girl" value="女" v-model="sex">
                    <label for="girl">女</label>
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>
                    <select v-model="age">
                        <option v-for="option in options" v-bind:value="option.value"
                                :disabled="option.value==0?true:false" :class="{statusbtn:option.value==0}">
                            {{ option.text }}
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>成绩</td>
                <td>
                    <input v-model.number="score" placeholder="请输入成绩"  style="width:150px"/>
                </td>
            </tr>
            <tr>
                <td>兴趣</td>
                <td>
                    <span v-for="(studentHobby,index) in studentHobbys" >
                        <input type="checkbox" name="interests" v-bind:value="index+1" v-model="checkData">
                        <label>{{ studentHobby.hobby }}</label>
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" :value="form" @click="submission" v-if="isAdd"/>
                    <input type="submit" :value="form" @click="update"     v-else="!isAdd"/>
                    <input type="submit" id="reset" value="重置" v-on:click="resets"/>
                </td>
            </tr>
        </table>
 
 
        <br /><br /><br /><br />
        <table border="1" cellspacing="0" cellpadding="0" id="listTable">
        <tr>
            <td>选中</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>成绩</td>
            <td>兴趣</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>
                <label>全选</label>
                <input type="checkbox" name="item" v-model='checked' v-on:click='checkedAll'/>
            </td>
            <td  colspan="6" align="center">
                <input type="button" value="选中删除" @click="delRow"/>
            </td>
        </tr>
        <tr v-for="(items,index) in student">
            <td><input type="checkbox" name="item" v-model="checkList" :value="items.id"/>{{1 + index}}</td>
            <td>{{items.name}}</td>
            <td>{{items.sex}}</td>
            <td>{{items.age}}</td>
            <td>{{ items.score }}</td>
            <td><span v-for="item in items.hobby">{{item.hobby}} </span></td>
            <td>
                <input type="button" value="删除" @click="del(items.id)"/>
                <input type="button" name="update" value="修改" @click="modify(items)" />
            </td>
        </tr>
        </table>
    </div>
    <style>
        .statusbtn {
            color: #d6caca;
            cursor: not-allowed; /*这个在button上面才管用,是一个禁用的小标识*/
        }
    </style>

    <script>
        var app1=new Vue({
            el:'#app1',
            data:{
                options: [
                    { text: '请选择', value: '0' },
                    { text: '16', value: '16' },
                    { text: '17', value: '17' },
                    { text: '18', value: '18' },
                    { text: '19', value: '19' },
                    { text: '20', value: '20' },
                    { text: '21', value: '21' },
                    { text: '22', value: '22' },
                    { text: '23', value: '23' },
                ],
                id:'',
                name:'',
                age:'0',
                sex:'男',
                score:'',
                studentHobbys:[],
                student:[],
                form:'提交',
                isAdd: true,
                checkData: [],//后台请求的数据
                checked:false,//全选框
                checkList: []
            },
            watch: { // 监视双向绑定的数据数组
                'checkList': {
                    handler(val, oldVal){ // 数据数组有变化将触发此函数
                        if (val.length === this.student.length) {
                            this.checked = true;
                        } else {
                            this.checked = false;
                        }
                    },
                    deep: true // 深度监视
                }
            },
            created: function (){
                this.getStudent();
                this.getHobbysAll();
            },
            methods: {
                getHobbysAll: function(){
                    axios.get('http://localhost:8080/getHobbys')
                        .then(function (response) {
                            var arr = response.data;
                            app1.studentHobbys = arr;
                        })
                        .catch(function (error) {
 
                        })
                },
                getStudent:function () {
                    axios.post('http://localhost:8080/getAll').
                    then(function (response){
                        var arr=response.data;
                        app1.student=arr;
                    }) .catch(function (error) {
 
                    })
                },
                submission:function () {
                    // console.log("选中："+this.checkData);
                    //获取兴趣
                    var selectedValue=this.checkData;
                    axios.get('http://localhost:8080/addStudent?name='+this.name+'&sex='+this.sex+'&age='+
                       this.age+'&score='+this.score+'&hobbys='+selectedValue)
                        .then(function (response) {
                            //更新
                            app1.getStudent();
                            //重置
                            app1.resets();
                        }).catch(function (error) {
 
                        })
                },
                del:function (e) {
                    // console.log(e);
                    axios.get('http://localhost:8080/deleteStudent?studentId='+e)
                        .then(function (response) {
                            app1.getStudent();
                        }).catch(function (error) {
 
                    })
                },
                //选中删除
                delRow:function(){
                    for(var i=0;i<this.checkList.length;i++){
                        axios.get('http://localhost:8080/deleteStudent?studentId='+this.checkList[i])
                            .then(function (response) {
                                app1.getStudent();
                            }).catch(function (error) {
 
                        })
                    }
                },
                //修改回显
                modify:function (items) {
                    //重置
                    app1.resets();
                    //更新按钮
                    app1.form='更新';
                    //回显
                    this.id=items.id;
                    this.name=items.name;
                    this.sex=items.sex;
                    this.age=items.age;
                    this.score=items.score;
                    var arr=[];
                    for(var i=0;i<items.hobby.length;i++){
                        arr.push(items.hobby[i].id);
                    }
                    this.checkData=arr;
                    this.isAdd=false;
                },
                update:function(items){
                    axios.get('http://localhost:8080/updateStudent?id='+this.id+'&name='+this.name+'&sex='+this.sex+'&age='+
                        this.age+'&score='+this.score+'&hobbys='+this.checkData)
                        .then(function (response) {
                            app1.getStudent();
                            app1.resets();
                        }).catch(function (error) {
 
                    })
                },
                resets:function () {
                    this.name='',
                    this.sex='男',
                    this.age='0',
                    this.score=''
                    this.checkData=[],
                    this.form='提交',
                    this.isAdd=true
                },
                checkedAll: function(){
                    //全选和反选
                    var _this = this;
			// .log(_this.checked+"---"+_this.checkList+"----"+_this.student)
                    this.$nextTick(function() {
                        if(!_this.checked){
                            _this.checkList = _this.student.map(function(json,index){
                                // console.log(json.id+","+index)
                                return json.id;
                            })
                        }else {
                            _this.checkList = []
                        }
                    });
                },
            }
        });
    </script>
</body>
</html>
